<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<canvas id="canvas" style="border: 1px solid red;"></canvas>
		<script type="text/javascript">
			function du(e) {
				return e * Math.PI / 180
			}
			var canvas = document.getElementById('canvas');
			var ctx = canvas.getContext("2d");
			canvas.width = 600;
			canvas.height = 500;

			ctx.lineWidth = 5;
			ctx.beginPath();
			ctx.moveTo(99, 290);
			ctx.bezierCurveTo(185, 20, 401, 87, 503, 314);
			ctx.stroke();
			ctx.closePath();

			ctx.beginPath();
			ctx.moveTo(376, 145);
			ctx.bezierCurveTo(390, 53, 459, 71, 436, 148);
			ctx.stroke();
			ctx.closePath();

			ctx.beginPath();
			ctx.moveTo(99, 290);
			ctx.bezierCurveTo(301, 296, 383, 295, 382, 265);
			ctx.stroke();
			ctx.closePath();

			ctx.beginPath();
			ctx.moveTo(433, 201);
			ctx.bezierCurveTo(510, 248, 491, 150, 436, 148);
			ctx.stroke();			
			ctx.closePath();

			ctx.beginPath();
			ctx.moveTo(161, 238);
			ctx.quadraticCurveTo(191, 164, 254, 216);
			ctx.stroke();
			ctx.closePath();

			ctx.beginPath();
			ctx.moveTo(161, 238);
			ctx.quadraticCurveTo(201, 210, 254, 216);
			ctx.stroke();
			ctx.closePath();

			ctx.beginPath();
			ctx.moveTo(295, 218);
			ctx.quadraticCurveTo(324, 156, 373, 216);
			ctx.stroke();
			ctx.closePath();

			ctx.beginPath();
			ctx.moveTo(295, 218);
			ctx.quadraticCurveTo(321, 200, 373, 216);
			ctx.stroke();
			ctx.closePath();

			ctx.beginPath();
			ctx.moveTo(99, 290);
			ctx.quadraticCurveTo(182, 352, 318, 350);
			ctx.stroke();
			ctx.closePath();
			
			ctx.beginPath();
			ctx.moveTo(261, 348);
			ctx.lineTo(247, 452);
			ctx.stroke();
			ctx.closePath();
			
			ctx.strokeStyle = "red";
			
			ctx.beginPath();
			ctx.moveTo(140, 262);
			ctx.lineTo(136, 278);
			ctx.stroke();
			ctx.closePath();
			
			ctx.beginPath();
			ctx.moveTo(153, 261);
			ctx.lineTo(159, 280);
			ctx.stroke();
			ctx.closePath();
			
			ctx.beginPath();
			ctx.moveTo(176, 260);
			ctx.lineTo(171, 275);
			ctx.stroke();
			ctx.closePath();
			
			ctx.beginPath();
			ctx.moveTo(334, 236);
			ctx.lineTo(330, 256);
			ctx.stroke();
			ctx.closePath();
			
			ctx.beginPath();
			ctx.moveTo(348, 237);
			ctx.lineTo(356, 252);
			ctx.stroke();
			ctx.closePath();
			
			ctx.beginPath();
			ctx.moveTo(375, 237);
			ctx.lineTo(369, 248);
			ctx.stroke();
			ctx.closePath();
			
			ctx.beginPath();
			ctx.moveTo(161, 238);
			ctx.lineTo(184, 202);
			ctx.lineTo(190, 222);
			ctx.fill();
			ctx.closePath();
			
			ctx.beginPath();
			ctx.moveTo(295, 216);
			ctx.lineTo(315, 191);
			ctx.lineTo(319, 208);
			ctx.fill();
			ctx.closePath();

			canvasx = canvas.getBoundingClientRect().left //返回canvas距离左边的距离
			canvasy = canvas.getBoundingClientRect().top //返回canvas距离上边的距离
			var startx;
			var starty;
			canvas.addEventListener("mousedown", downfun);

			function downfun(e) {
				startx = e.clientX - canvasx;
				starty = e.clientY - canvasy;
				console.log(startx, starty)
			}
		</script>
	</body>

</html>